<template lang="html">
  <div class="jindubang">
    <div class="flex-container column">
        <div class="item one" style="transform: translate(0%,0%) scale(1)">
          <jindumultiples></jindumultiples>
        </div>
        <div class="item two active" style="transform: translate(78%,0%) scale(1)">
          <jinduradar></jinduradar>
        </div>
        <div class="item three" style="transform: translate(230%, 0%) scale(1)">
          <jinducategory></jinducategory>
        </div>
        <div class="item four" style="transform: translate(0%, 100%) scale(1)">
          <jindumultiplebar></jindumultiplebar>
        </div>
        <div class="item fix" style="transform: translate(233%,100%) scale(1)">
          <jindupie></jindupie>
        </div>
    </div>
    <div class="table">
      <div class="close">x</div>
      <iframe src="" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
import jindupie from 'components/jindu/jindupie/jindupie'
import jinduradar from 'components/jindu/jinduradar/jinduradar'
import jinducategory from 'components/jindu/jinducategory/jinducategory'
import jindumultiplebar from 'components/jindu/jindumultiplebar/jindumultiplebar'
import jindumultiples from 'components/jindu/jindumultiples/jindumultiples'

export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this._init()
  },
  methods: {
    _resize() {
      this.$root.charts.forEach((myChart) => {
        myChart.resize()
      })
    },
    _init() {
      this.items = document.querySelectorAll('.flex-container .item')
      for (let i = 0; i < this.items.length; i++) {
        this.items[i].dataset.order = i + 1;
      }
      localStorage.setItem('areaname', '平顶山市')
      $(".close").click(function () {
        $('.table').hide();
      })
    },
    clickChart(clickIndex) {
      let activeItem = document.querySelector('.flex-container .active')
      let activeIndex = activeItem.dataset.order
      let clickItem = this.items[clickIndex - 1]
      if (activeIndex === clickIndex) {
        return
      }
      activeItem.classList.remove('active')
      clickItem.classList.add('active')
      this._setStyle(clickItem, activeItem)
    },
    _setStyle(el1, el2) {
      let transform1 = el1.style.transform
      let transform2 = el2.style.transform
      el1.style.transform = transform2
      el2.style.transform = transform1
    }
  },
  components: {
    jindupie,
    jinduradar,
    jinducategory,
    jindumultiplebar,
    jindumultiples
  }
}

</script>

<style lang="stylus" scoped>
*
  box-sizing: border-box;
.jindupie,.jinduradar,.jinducategory,.jindumultiplebar,.jindumultiples
  height 100%!important
  width 100%!important
  background none!important
.item
    padding: 0px;
    margin: 0px;
    width: 30%;
    height: 50%;
    position absolute
    text-align: center;
    transition:all 0.8s;
.jindubang
    position relative
    width 100%
    height 100%
    margin:0px;
    padding:0px;
    padding-top 0%
    background url('../../../assets/bg.jpg');
    background-size 100% 100%
.flex-container.column
    position relative
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin:  0 auto;
    box-sizing: content-box;
.active
    width: 38%;
.table{
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  background:#000;
  position: absolute;
  top: 0;
  left: 0;
  background url('../../../assets/bg.jpg') no-repeat;
  background-size 100% 100%;
  display: none;
}
.table iframe{
  position:fixed;
  display:block;
  left:0;
  right:0;
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
}
.close{
  position: absolute;
  right: 20px;
  top: 5px;
  border: 1px solid #666;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 18px;
  color: #666;
  z-index: 999;
  cursor: pointer;
}
</style>
